<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
    <title>享钱</title>

    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/Respond/respond.min.js"></script>
    <![endif]-->
    <link href="css/main.css" rel="stylesheet">
    <!--<link rel="shortcut icon" href="imge/favicon.ico"/>-->
</head>
<body>

<div class="xiangqian">
    <!--享钱头部-->
    <header class="header_xdd">
        <div class="header-position">
            <div class="pull-left title-left">
                <img src="imge/header_logo.png" alt=""/>
            </div>
            <div class="pull-right title-right">
                <ul>
                    <li><a href="#">
                        <span class="system">系统消息<em></em></span>
                    </a>
                    </li>
                    <li><a href="#" class="fix-news">新手引导</a></li>
                    <li><a href="#">
                            <span class="manager">
                                <i></i>
                                商户管理员&nbsp;&nbsp;[刘先生...]</span>
                    </a>
                    </li>
                    <li><a href="#">余额<span class="fix-money">220.9</span>元</a></li>
                    <li><a href="#">修改密码</a></li>
                    <li><a href="#"><span class="fix-exit"><i></i>退出</span></a></li>
                </ul>
            </div>
        </div>
    </header>

    <div class="xiang-body-bg">
        <div class="xianq-body clearfix">
            <div class="xianq-body-left">
                <h4 class="text-center">运营平台</h4>
                <div class="xiang-body-left-item">
                    <ul>
                        <li>
                            <a href="#" class="xiang-store">
                                <i class="icon-logo"></i>
                                <span>门店管理</span>
                            </a>
                            <ul>
                                <li><a href="#"><span>门店管理</span></a></li>
                                <li><a href="#"><span>营业员管理</span></a></li>
                                <li><a href="#"><span>人员管理</span></a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="xiang-store">
                                <i class="icon-logo"></i>
                                <span>应用管理</span>
                            </a>
                            <ul>
                                <li><a href="#"><span>会员卡</span></a></li>
                                <li><a href="#"><span>营销活动</span></a></li>
                                <li><a href="#"><span>一码通</span></a></li>
                                <li><a href="#"><span>收银台</span></a></li>
                                <li><a href="#"><span>聚合外卖</span></a></li>
                                <li><a href="#"><span>配送管理</span></a></li>
                                <li><a href="#"><span>口碑店铺</span></a></li>
                                <li><a href="#"><span>添加应用</span></a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="xiang-store">
                                <i class="icon-logo"></i>
                                <span>账户管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="xiang-store">
                                <i class="icon-logo"></i>
                                <span>接口配置</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="xiang-store">
                                <i class="icon-logo"></i>
                                <span>数据中心</span>
                                <p>数据仅供数据分析，请勿对账</p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="xiang-store">
                                <i class="icon-logo"></i>
                                <span>资质提交</span>
                                <p>用于提交微信支付、支付宝</p>
                                <p>开户等资质</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="xianq-body-right">
                <h4 class="text-left">运营平台</h4>
                <div class="xiang-body-right-item">
                    <!--此处书写内容-->
                    <div class="list-item">
                        <ul class="list-inline list-title">
                            <li class="active"><a href="#">会员管理</a></li>
                            <li class="separator"></li>
                            <li ><a href="#">余额流水</a></li>
                            <li class="separator"></li>
                            <li><a href="#">积分</a></li>
                            <li class="separator"></li>
                            <li ><a href="#">储值</a></li>
                            <li class="separator"></li>
                            <li ><a href="#">等级</a></li>
                            <li class="separator"></li>
                            <li ><a href="#">基本配置</a></li>
                        </ul>

                        <ul class="list-inline list-sub-title">
                            <li class="active" >
                                <em></em>
                                <a href="#">积分规则</a>
                            </li>
                            <li >
                                <em></em>
                                <a href="#">积分获取</a>
                            </li>
                            <li >
                                <em></em>
                                <a href="#">积分消耗</a>
                            </li>
                            <li >
                                <em></em>
                                <a href="#">积分商城</a>
                            </li>
                        </ul>
                    </div>
                    <div class="xiang-btn">
                        <div class="btn-group" role="group" aria-label="...">
                            <button type="button" class="btn btn-default">按门店统计</button>
                            <button type="button" class="btn btn-default">按日期统计</button>
                        </div>
                    </div>

                    <div class="store-choice">
                        <div class="store-one">
                            <div class="row">
                                <div class="col-md-1 col-lg-1 col-md-offset-1 col-lg-offset-1 left-one">
                                    <span>门店</span>
                                </div>
                                <div class="col-md-2 col-lg-2 col-md-offset-1 col-lg-offset-1 right-one">
                                    <a href="#"><span>选择门店</span></a>
                                </div>
                            </div>
                        </div>

                        <div class="store-two">
                        <div class="row">
                            <div class="col-md-1 col-lg-1 col-md-offset-1  left-two">
                                <span>日期</span>
                            </div>
                            <div class="col-md-5 col-lg-5  right-two">
                                <input type="text" placeholder="2017-09-16"/>
                                <span>至</span>
                                <input type="text" placeholder="2017-09-18"/>
                            </div>
                            <div class="col-md-5 col-lg-5 right-three">
                                <button class="btn btn-default" type="submit">今天</button>
                                <button class="btn btn-default" type="submit">昨天</button>
                                <button class="btn btn-default" type="submit">近七天</button>
                                <button class="btn btn-default" type="submit">近30天</button>
                            </div>
                        </div>
                    </div>

                        <div class="store-three">
                            <div class="row">
                                <div class="col-md-1 col-lg-1 col-md-offset-1 col-lg-offset-1 left-for">
                                    <span>时间段</span>
                                </div>
                                <div class="col-md-5 col-lg-5   right-for">
                                    <input type="text" placeholder="2017-09-16"/>
                                    <span>至</span>
                                    <input type="text" placeholder="2017-09-18"/>
                                </div>
                            </div>
                        </div>

                        <div class="store-four">
                            <div class="row">
                                <div class="col-md-1 col-lg-1 col-md-offset-3 col-lg-offset-3 check-btn">
                                    <button type="button" class="btn btn-warning">查询</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="chart-title">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a href="#peisong" aria-controls="peisong" role="tab" data-toggle="tab"><span>配送时长分析</span></a></li>
                                <li role="presentation"><a href="#shuju" aria-controls="shuju" role="tab" data-toggle="tab"><span>平均数据分析</span></a></li>
                                <li role="presentation" ><a href="#duibi" aria-controls="duibi" role="tab" data-toggle="tab"><span>费用与配送费对比</span></a></li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="peisong">
                                    <div>
                                        <ul class="clearfix">
                                            <li><span>平均做菜时长</span></li>
                                            <li><span>平均接单时长</span></li>
                                            <li><span>平均取货时长</span></li>
                                            <li><span>平均配送时长</span></li>
                                            <li><span>平均完成时长</span></li>
                                        </ul>
                                        <div class="pull-right download">
                                            <button type="button" class="btn btn-warning">下载图表</button>
                                        </div>
                                    </div>

                                    <div class="chart-show">
                                        <div id="chart_main"></div>
                                    </div>
                                </div>

                                <div role="tabpanel" class="tab-pane" id="shuju">2</div>
                                <div role="tabpanel" class="tab-pane" id="duibi">
                                    <div class="duibi">
                                        <ul class="clearfix">
                                            <li><span>达达配合计费</span></li>
                                            <li><span>公司收取配送费</span></li>
                                            <li><span>公司收取金额占比</span></li>
                                            <li><span>平均配送成本</span></li>
                                            <li><span>订单数</span></li>
                                        </ul>
                                        <div class="pull-right download">
                                            <button type="button" class="btn btn-warning" onclick="refresh(true)">下载图表</button>
                                        </div>
                                    </div>

                                    <div class="chart-show">
                                        <div id="chart_duibi"></div>
                                    </div>
                                </div>
                            </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <!--享钱底部-->
</div>

</body>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/echarts/echarts.min.js"></script>
<script src="js/main.js"></script>
<script>
    var mChartDuibi = echarts.init(document.getElementById('chart_duibi'));
    optionChart = {
        color: ['#FFEB66','#F08200','#FDC98D','#FFB301','#FD4F2C'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

        toolbox: {
            feature: {
                saveAsImage:{
                    show : true,
                    title : '保存',
                    type : 'jpeg',
                    lang : ['点击保存']
                }
            }
        },

        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'邮件营销',
                type:'bar',
                stack: '总量1',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'bar',
                stack: '总量2',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'直接访问',
                type:'line',
                stack: '总量',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

    mChartDuibi.setOption(optionChart);
</script>
</html>